<template>
	<view class="container pend-order">
		<view class="header">取单</view>
		<scroll-view scroll-y="true" @scrolltolower="getOrder" class="pend-order-scroll-view-wrap"
			:style="{height : height}">
			<view class="table-list" v-if="orderData.list.length">
				<block v-for="(item, index) in orderData.list" :key="index">
					<view class="table-item" v-show="item.order_id != orderId">
						<view class="table-header">
							<view class="table-header-info">
								<text>订单总价：</text>
								<text class="color">￥{{ item.order_money | moneyFormat }}</text>
							</view>
							<view class="table-header-time">
								<text>挂单时间：{{ item.create_time | timeFormat }}</text>
								<block v-if="item.member_id">
									<text class="line">|</text>
									<text>会员：{{ item.nickname }}</text>
								</block>
							</view>
						</view>

						<view class="table-content">
							<view class="table-content-item" v-for="(goods, gindex) in item.order_goods" :key="gindex">
								<view class="content-item-left">
									<view class="content-item-img">
										<image :src="$util.img('public/uniapp/default_img/goods.png')"
											v-if="goods.goods_class == 'money'"></image>
										<image :src="$util.img(goods.goods_image, { size: 'small' })"
											@error="goods.goods_image = $util.img('public/uniapp/default_img/goods.png')"
											v-else></image>
									</view>
									<view class="content-item-info">
										<view class="content-item-name" v-if="goods.goods_class == 'money'">无码商品</view>
										<view class="content-item-name" v-else>{{ goods.goods_name }}
											{{ goods.spec_name }}
										</view>
										<view>￥{{ goods.price | moneyFormat }}</view>
									</view>
								</view>
								<view class="content-item-number">x {{ goods.num }}</view>

								<view class="content-item-price">￥{{ (goods.num * goods.price) | moneyFormat }}</view>
							</view>
						</view>

						<view class="remark-info" v-if="item.remark">备注：{{ item.remark }}</view>

						<view class="table-bottom">
							<button class="default-btn btn-left" @click="deleteOrder(item)">删除</button>
							<button class="default-btn btn-left" @click="remarkSeting(item, index)">备注</button>
							<button class="primary-btn btn-right" @click="takeorder(item, index)">取单</button>
						</view>
					</view>
				</block>
			</view>
			<view class="empty" v-if="!orderData.list.length || (orderData.list.length == 1 && orderId)">
				<image :src="$util.img('public/uniapp/cashier/goods_empty.png')" mode="widthFix"></image>
				<view class="tips">暂无挂单记录</view>
			</view>
		</scroll-view>

		<uni-popup ref="remarkPopup" type="center">
			<view class="remark-wrap">
				<view class="header">
					<text class="title">备注</text>
					<text class="iconfont iconguanbi1" @click="$refs.remarkPopup.close()"></text>
				</view>
				<view class="body"><textarea v-model="remark" placeholder="填写备注信息"
						placeholder-class="placeholder-class" /></view>
				<view class="footer"><button type="default" class="primary-btn" @click="remarkConfirm">确认</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: 'ncPendOrder',
		props: {},
		data() {
			return {
				orderData: {
					page: 0,
					total: 1,
					list: []
				},
				remark: '',
				index: -1,
				orderId: 0,
				isRepeat: false,
				height: ''
			};
		},
		created() {
			this.getOrder();
		},
		mounted() {
			this.setHeight();
		},
		methods: {
			getOrder() {
				if (this.orderData.page + 1 > this.orderData.total) return;
				this.orderData.page += 1;
				this.orderId = 0;
				this.$api.sendRequest({
					url: '/cashier/storeapi/pendorder/page',
					data: {
						page: this.orderData.page
					},
					success: res => {
						if (res.code == 0) {
							if (this.orderData.page == 1) this.orderData.list = [];
							this.$store.commit('setPendOrderNum', res.data.count);
							if (res.data.list.length) {
								this.orderData.total = res.data.page_count;
								this.orderData.list = this.orderData.list.concat(res.data.list);
							} else {
								this.orderData.total = 1;
							}
							this.setHeight();
						}
					}
				});
			},
			deleteOrder(data) {
				this.$api.sendRequest({
					url: '/cashier/storeapi/pendorder/delete',
					data: {
						order_id: data.order_id
					},
					success: res => {
						if (res.code == 0) {
							this.orderData.page = 0;
							this.getOrder();
						}
					}
				});
			},
			remarkConfirm() {
				let data = this.orderData.list[this.index];
				this.$api.sendRequest({
					url: '/cashier/storeapi/pendorder/updateremark',
					data: {
						order_id: data.order_id,
						remark: this.remark
					},
					success: res => {
						if (res.code == 0) {
							this.orderData.list[this.index].remark = this.remark;
							this.$refs.remarkPopup.close();
						} else {
							this.$util.showToast({
								title: '操作失败'
							});
						}
					}
				});
			},
			remarkSeting(data, index) {
				this.index = index;
				this.remark = data.remark;
				this.$refs.remarkPopup.open();
			},
			takeorder(data, index) {
				this.orderId = data.order_id;
				this.$emit('takeorder', data);
			},
			switchStoreAfter() {
				this.orderData = {
					page: 0,
					total: 1,
					list: []
				};
				this.getOrder();
			},
			setHeight() {
				this.$nextTick(() => {
					const query = uni.createSelectorQuery()
						// #ifndef MP-ALIPAY
						.in(this)
					// #endif
					query.selectViewport().scrollOffset(data => {
						this.height = (data.scrollHeight - 51 - 67 - 15) / 100 + 'rem';
					}).exec();

				});
			}
		}
	};
</script>

<style lang="scss">
	.container {
		height: 100%;
		display: flex;
		flex-direction: column;

		.pend-order-scroll-view-wrap {
			box-sizing: border-box;
			padding: 0.15rem 0;
		}
	}

	.header {
		height: 0.66rem;
		line-height: 0.66rem;
		text-align: left;
		border-bottom: 0.01rem solid #e6e6e6;
		color: #303133;
		font-size: 0.14rem;
	}

	.table-list {
		.table-item {
			border: 0.01rem solid #e6e6e6;
			padding: 0.15rem;
			position: relative;
			margin-bottom: 0.2rem;

			.table-header-info {
				text {
					font-size: 0.16rem;
				}

				.color {
					font-size: 0.18rem;
					color: #fe2278;
				}
			}

			.table-header-time {
				color: #909399;
				font-size: 0.14rem;
				margin-top: 0.1rem;

				.line {
					margin: 0 0.15rem;
				}
			}

			.table-header-btn {
				position: absolute;
				right: 0.3rem;
				top: 0.3rem;
				color: $primary-color;
				cursor: pointer;
			}

			.table-content {
				margin-top: 0.1rem;

				.table-content-item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 0.01rem solid #e6e6e6;
					padding: 0.1rem 0;

					.content-item-left {
						display: flex;
						align-items: center;
						flex: 1;
						width: 0;

						.content-item-info {
							padding-right: 0.15rem;
							flex: 1;
							width: 0;

							view {
								font-size: 0.14rem;
							}

							.content-item-name {
								margin-bottom: 0.05rem;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								line-clamp: 2;
								-webkit-box-orient: vertical;
								white-space: normal;
								word-break: break-all;
							}
						}
					}

					.content-item-img {
						width: 0.5rem;
						height: 0.5rem;
						margin-right: 0.1rem;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.content-item-number {
						font-size: 0.16rem;
					}

					.content-item-price {
						font-size: 0.14rem;
						width: 40%;
						text-align: right;
					}
				}
			}

			.remark-info {
				padding: 0.1rem;
				background-color: rgba($color: $primary-color, $alpha: 0.1);
				color: $primary-color;
				margin-top: 0.1rem;
				font-size: 0.12rem;
			}

			.table-bottom {
				margin-top: 0.2rem;
				display: flex;
				justify-content: end;

				button {
					width: 1rem;
					margin: 0;
					margin-right: 0.1rem;
				}
			}
		}
	}

	/deep/ .uni-scroll-view {
		&::-webkit-scrollbar {
			width: 0.06rem;
			height: 0.06rem;
			background-color: rgba($color: #000000, $alpha: 0);
		}

		&::-webkit-scrollbar-button {
			display: none;
		}

		&::-webkit-scrollbar-thumb {
			border-radius: 0.06rem;
			box-shadow: inset 0 0 0.06rem rgba(45, 43, 43, 0.45);
			background-color: #ddd;
			display: none;
		}

		&:hover::-webkit-scrollbar-thumb {
			display: block;
		}

		&::-webkit-scrollbar-track {
			background-color: transparent;
		}
	}

	.remark-wrap {
		width: 6rem;
		background-color: #fff;
		border-radius: 0.04rem;
		box-shadow: 0 0.01rem 0.12rem 0 rgba(0, 0, 0, 0.1);

		.header,
		.footer {
			height: 0.5rem;
			display: flex;
			align-items: center;
			justify-content: center;
			border-bottom: 0.01rem solid #e6e6e6;
			position: relative;

			.title {
				font-size: 0.16rem;
				font-weight: bold;
			}

			.iconfont {
				line-height: 1;
				position: absolute;
				right: 0.15rem;
				font-size: 0.2rem;
				cursor: pointer;
			}
		}

		.body {
			padding: 0.15rem;

			textarea {
				border: 0.01rem solid #e6e6e6;
				width: 100%;
				padding: 0.1rem;
				box-sizing: border-box;
				font-size: 0.14rem;
			}

			.placeholder-class {
				font-size: 0.14rem;
			}
		}

		.footer {
			border-top: 0.01rem solid #e6e6e6;
			border-bottom: unset;

			button {
				width: 1rem;
			}
		}
	}

	.empty {
		text-align: center;
		padding-top: 1.2rem;

		image {
			width: 2rem;
		}

		.tips {
			color: #999;
			margin-top: 0.15rem;
		}
	}
</style>